<template>
    <div>
        状态: {{msg}}  , 获取到数据: {{total}} 条
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="id" width="140">
            </el-table-column>
            <el-table-column prop="name" label="书名" width="300">
            </el-table-column>
            <el-table-column prop="writer" label="作者" width="200">
            </el-table-column>
            <el-table-column label="操作" width="100">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
            </el-table-column>
        </el-table>

        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="page"
            page-size=5>
        </el-pagination>            
    </div>
</template>

<script>
  export default {
    name: 'Book',
    data() {
        return{
            tableData: [],
            msg: "",
            total: 0,
        }
    },
    methods: {
        deleteClick(row){
            const _this = this;
            this.$confirm('此操作将永久删除书籍 《'+ row.name + '》, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$axios.delete("http://localhost:8092/book?id=" + row.id).then(function(resp){
                    if(resp.data.code == '200'){
                        _this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        window.location.reload();
                    } else {
                        _this.$message({
                        type: 'success',
                        message: '删除失败!'
                        });
                    }
                });
            }).catch(() => {
                _this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        edit(row){
            this.$router.push({
                path: '/updatebook',
                query:{
                    id: row.id
                }
            });
        },        
        page(currentPage){
            const _this = this;
            this.$axios.get("http://localhost:8092/book/list/" + currentPage + "/5")
            .then(function(resp) {
                _this.tableData = resp.data.content;
                _this.total = resp.data.totalElements;
            });
        }
    },
    created() {
        const _this = this;
        this.$axios.get("http://localhost:8092/book/list/1/5")
        .then(function(resp) {
            _this.tableData = resp.data.content;
            _this.total = resp.data.totalElements;
        });
    }
  };
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>
